<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<style>
    .anchorBL{
        display: none!important;
    }


</style>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: ele-vue" />
<body style="height: 100%; margin: 0">
<div id="mapshow" style="width: 100%;height: 100%;display: flex">
    <div style="background-color: #ffffff;width: 20%;float: left">
        <button id="xzjg" @click="showstatistis(1)">下载统计-机构</button>
        <button id="scjg" @click="showstatistis(0)">上传统计-机构</button>
        <el-table
                ref="multipleTable"
                :data="list"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <!--    <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>-->
            <el-table-column
                    prop="deptName"
                    label="用户机构"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="val"
                    label="下载量"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
    <div style="background-color: rgba(255,255,255,0);width: 79%;">
        <div id="container" style="height: 100%;"></div>
    </div>
</div>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=6adWMU9fECMDUxPZF1CPKcr35WLi5cMw"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/bmap.min.js"></script>

<script type="text/javascript">
    new Vue({
        // 控制的标签容器
        el: '#mapshow',
        // 交互的数据
        data() {
            return {
                list: [],
                fullscreenLoading: false,
            };
        },

        mounted() {
            this.showstatistis(1);
        },
        methods: {
            showstatistis(type){
                //加载。。。
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
              //  console.log(type)
                if(type==0){
                    $("#scjg").css("background-color","#5959f9")
                    $("#xzjg").css("background-color","#ffffff")
                }else{
                    $("#scjg").css("background-color","#ffffff")
                    $("#xzjg").css("background-color","#5959f9")
                }
                loading.close();
                that = this
                $.post('/home/getstatistis', {type:type}, function (res) {
                   // console.log(res.data)
                    that.list = res.data;
                    //console.log(this.list)
                    var dom = document.getElementById('container');
                    var myChart = echarts.init(dom, null, {
                        renderer: 'canvas',
                        useDirtyRect: false
                    });
                    var app = {};

                    var option;

                    var lists = []; //处理为list数据 统计图可显示的 data
                    for (let i = 0; i < res.data.length; i++) {
                        var map = {}
                        map["name"] = res.data[i].deptName;
                        map["value"] = (res.data[i].val*0.01);
                        lists.push(map)
                    }
                    const data = lists;
                    var maps = {}; //处理为list数据 统计图可显示的 geoCoordMap
                    for (let i = 0; i < res.data.length; i++) {
                        var list = []
                        list.push(res.data[i].longitude,res.data[i].latitude);
                        maps[res.data[i].deptName] = list
                    }
                    const geoCoordMap = maps;
                    const convertData = function (data) {
                        var res = [];
                        for (var i = 0; i < data.length; i++) {
                            var geoCoord = geoCoordMap[data[i].name];
                            if (geoCoord) {
                                res.push({
                                    name: data[i].name,
                                    value: geoCoord.concat(data[i].value)
                                });
                            }
                        }
                        return res;
                    };
                    option = {
                        title: {
                            text: '',
                            subtext: '',
                            sublink: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        bmap: {
                            center: [124.059242,34.984143],
                            zoom: 5,
                            roam: true,
                            mapStyle: {
                                styleJson: [
                                    {
                                        featureType: 'water',
                                        elementType: 'all',
                                        stylers: {
                                            //visibility: 'off',
                                            color: '#064f85',
                                        }
                                    },
                                    {
                                        featureType: 'land',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off',
                                            color: '#000d56'
                                        }
                                    },
                                    {
                                        featureType: 'railway',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'highway',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off',
                                            color: '#cbebff'
                                        }
                                    },
                                    {
                                        featureType: 'highway',
                                        elementType: 'labels',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'arterial',
                                        elementType: 'geometry',
                                        stylers: {
                                            color: '#8cd0f8'
                                            ,visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'arterial',
                                        elementType: 'geometry.fill',
                                        stylers: {
                                            color: '#87d0fe',
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'poi',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'green',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'subway',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'manmade',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off',
                                            color: '#87d0fe'
                                        }
                                    },
                                    {
                                        featureType: 'local',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off',
                                            color: '#87d0fe'
                                        }
                                    },
                                    {
                                        featureType: 'arterial',
                                        elementType: 'labels',
                                        stylers: {
                                            visibility: 'off'
                                        }
                                    },
                                    {
                                        featureType: 'boundary',
                                        elementType: 'all',
                                        stylers: {
                                            //visibility: 'off',
                                            color: '#87d0fe'
                                        }
                                    },
                                    {
                                        featureType: 'building',
                                        elementType: 'all',
                                        stylers: {
                                            visibility: 'off',
                                            color: '#064f85'
                                        }
                                    },
                                    {
                                        featureType: 'label',
                                        elementType: 'labels.text.fill',
                                        stylers: {
                                            //visibility: 'off',
                                            color: '#999999'
                                        }
                                    }
                                ]
                            }
                        },
                        series: [
                            {
                                name: 'pm2.5',
                                type: 'scatter',
                                coordinateSystem: 'bmap',
                                data: convertData(data),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                encode: {
                                    value: 2
                                },
                                label: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            {
                                name: 'Top 5',
                                type: 'effectScatter',
                                coordinateSystem: 'bmap',
                                data: convertData(
                                    data
                                        .sort(function (a, b) {
                                            return b.value - a.value;
                                        })
                                        .slice(0, 6)
                                ),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                encode: {
                                    value: 2
                                },
                                showEffectOn: 'render',
                                rippleEffect: {
                                    brushType: 'stroke'
                                },
                                label: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                },
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                },
                                emphasis: {
                                    scale: true
                                },
                                zlevel: 1
                            }
                        ]
                    };

                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }
                    window.addEventListener('resize', myChart.resize);
                })
            }
        }
    })

</script>
</body>
<style>
    .el-table{
     height: 95%!important;
     overflow: auto!important;
    }
    #xzjg{
        background-color: rgba(49, 98, 255, 0.78);
        border: 0px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #scjg{
        background-color: #ffffff;
        border: 0px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
</style>
</html>